<template>
	<view>
		<view class="g-goBack" @click="$common.toBack();">
			<view class="cuIcon-back"></view>
		</view>
		<view class="headBar">
			<view class="tabBar">
				<view :class="'item '+(tabBarIndex==1?'cur':'')" @click="tabBarIndex=1">基础信息</view>
				<view :class="'item '+(tabBarIndex==2?'cur':'')" @click="tabBarIndex=2">设备分派</view>
				<view :class="'item '+(tabBarIndex==3?'cur':'')" @click="tabBarIndex=3,drawChartsMain()">数据概览</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<!-- 基础信息 -->
		<view class="baseInfo" v-if="tabBarIndex==1">
			<view class="box1">
				<view class="no">{{deviceInfo.deviceSn||'-'}}</view>
				<view>{{deviceInfo.deviceTypeId||'-'}}</view>
				<view class="online" v-if="deviceInfo.state==2">在线</view>
				<view class="online off" v-else>离线</view>
			</view>
			<view class="box2">
				<!-- <view>
					<text class="key">设备状态</text><text>{{deviceInfo.state==1?'正常':'异常'}}</text>
				</view> -->
				<view>
					<text class="key">所在网点</text><text>{{deviceInfo.placeName||'未部署'}}</text>
				</view>
			</view>
			<view class="box3" v-if="deviceInfo.placeName">
				<view>
					<text class="key">忙碌接口</text><text>{{workingNum}}</text>
				</view>
				<view class="line"></view>
				<view>
					<text class="key">总接口</text><text>{{deviceInfo.slotTotal||'-'}}</text>
				</view>
				<view class="line"></view>
				<view>
					<text class="key">空闲接口</text><text>0</text>
				</view>
			</view>
			<view class="box2">
				<view>
					<text class="key">设备创建时间</text><text>{{deviceInfo.createDate||'-'}}</text>
				</view>
				<view @click="modalName='qrcode'">
					<text class="key">设备二维码</text>
					<text style="color: #ed7337;">点击查看<text class="cuIcon-right"></text></text>
				</view>
			</view>
			<block v-if="deviceInfo.placeName">
				<view class="button" style="margin-top: 40rpx;" @click="btnUnDeploy">取消部署</view>
			</block>
		</view>
		<!-- 接口详情 -->
		<view class="portInfo" v-if="tabBarIndex==1">
			<view class="title"><text class="cuIcon-settingsfill icon"></text>插座信息</view>
			<block v-for="(item,index) in deviceInfo.slotItems" :key="index">
				<view :class="'item '+(item.state==1?'':'open')" >
					<view class="head">
						<text class="index">{{item.slotNum}}</text>
						<text>{{item.stateName}}</text>
						<text class="orderno"></text>
					</view>
					<view class="button" style="width: 160rpx;padding: 10rpx;" v-if="item.state==1" @click="btnTestUse(item.slotNum)">测试充电</view>
					<!-- <view class="button disable" style="width: 160rpx;padding: 10rpx;" v-else>关闭充电</view> -->
					<view class="state">
						过载:{{item.overloadStateName}}
						<text class="margin-right"></text>
						温度:{{item.temperatureStateName}}
						<text class="margin-right"></text>
						{{item.powerStateName}}
					</view>
				</view>
			</block>
		</view>
		<!-- 设备分派 -->
		<view class="deviceAssign" v-if="tabBarIndex==2">
			<!-- <view class="item">
				<text>郑01</text>
				<view>15992323111<text class="unbind">删除</text></view>
			</view> -->
			<image src="/static/noneContent.png" mode="aspectFit"></image>
			<view style="text-align: center;">暂无分派员工</view>
			<view class="button" style="margin-top: 40rpx;" @click="$utils.toURL('/device/assign?dev='+deviceInfo.deviceSn)">设备分派</view>
		</view>
		<!-- 数据概览 -->
		<view class="dataInfo" v-if="tabBarIndex==3">
			<!-- <view class="box1">
				<view class="item"><view class="key">今日充电次数</view><view>7</view></view>
				<view class="item"><view class="key">近7日充电次数</view><view>50</view></view>
				<view class="item"><view class="key">今日使用率</view><view>100%</view></view>
				<view class="item"><view class="key">近7日使用率</view><view>100%</view></view>
			</view>
			<view class="box2">
				<view style="font-weight: 600;">趋势</view>
				<view class="tabBarBtn">
					指标：
					<text :class="tabBarChart==1?'cur':''" @click="tabBarChart=1">充电次数</text>
					<text :class="tabBarChart==2?'cur':''" @click="tabBarChart=2">使用率</text>
				</view>
				<canvas canvas-id="charts" id="charts" class="charts"/>
			</view> -->
			<image src="/static/working.png" mode="aspectFit"></image>
			<view style="text-align: center;">开发中...</view>
		</view>
		<!-- 设备二维码弹窗 -->
		<view class="cu-modal qrCode" :class="modalName=='qrcode'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="title">设备二维码</view>
				<view class="img">
					<canvas canvas-id="qrcode" style="width: 300rpx;margin: 0 auto;"/>
				</view>
				<view style="font-weight: 600;">{{deviceId}}</view>
				<view class="btn" @click="modalName=null">关闭</view>
			</view>
		</view>
		<!-- 交互框 -->
		<view class="cu-modal modal" :class="(modalName=='testUse')?'show':''">
		  <view class="cu-dialog bg-white">
			   <view class="head">测试充电</view>
			  <view class="content">
			  	<view><input type="number" v-model="testMinute"/>分钟</view>
			  </view>
			  <view class="footer">
			  	<view @click="modalName=null">取消</view>
				<view class="confirm" @click="btnTestUseC">开始充电</view>
			  </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import uQRCode from "@/js_sdk/uQrcode.js"
	import uCharts from "@/js_sdk/u-charts/u-charts.js"
	import store from '@/common/store';
	const uChartsInstance = {};
	export default {
		data() {
			return {
				page:0,
				tabBarIndex:1, //页面tabBar
				tabBarChart:1, //图标tabBar
				
				workingNum:0, //工作中接口
				
				modalName:null,//弹窗
				
				deviceId:null,
				deviceInfo:{},
				 
				testSlot:0,    //测试充电插座
				testMinute:1, //测试充电时长
			}
		},
		onLoad(option) {
			this.deviceId = option.id;
			this.getInit();
		},
		methods: {
			getInit(){
				const api = this.$request;
				const self = this;
				api.post(api.url.cdczDevInfo,{
					deviceSn:self.deviceId
				},res=>{
					if(res.code==200){
						self.deviceInfo = res.body;
						const httpDomain = store.getters.GET_httpDomain;
						self.qrFun(`${httpDomain}/dev/cdcz/${self.deviceId}`);
						for (let slot of res.body.slotItems) {
							if(slot.state==2){
								this.workingNum++;
							}
						}
					}
					if(res.code==197){
						uni.showModal({
							content:res.msg,
							showCancel:false,
							success() {
								$common.toBack();
							}
						})
					}
				})
			},
			//测试充电开启
			btnTestUse(slot){
				if(this.deviceInfo.state==2){
					this.testSlot = slot;
					this.modalName = "testUse";
				}else{
					uni.showToast({
						title:'离线设备无法测试',
						icon:"error"
					})
				}
			},
			btnTestUseC(){
				this.modalName = null;
				const api = this.$request;
				api.post(api.url.cdczTestOpen,{
					deviceSn:this.deviceId,
					slotNum:this.testSlot,
					chargeTimes:this.testMinute
				},res=>{
					if(res.code==200){
						uni.showToast({
							title:"测试充电已开启",
						})
						this.getInit();
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				})
			},
			// 取消部署
			btnUnDeploy(){
				const api = this.$request;
				const self = this;
				uni.showModal({
					title:'移除部署',
					content:'确定将该设备移除部署？',
					success(res) {
						if(res.confirm){
							api.post(api.url.placeDeDeploys,{
								deviceSn:self.deviceId
							},res=>{
								if(res.code==200){
									uni.showToast({
										title:"取消成功！",
										success(res) {
											$common.toBack();
										}
									})
								}else{
									uni.showToast({
										title:res.msg,
										icon:"none"
									})
								}
							})
						}
					}
				})
			},
			//**生成二维码**//
			qrFun(text) {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 150,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			//生成图标
			drawChartsMain() {
			  let res = {
			  	categories: ["03-09","03-10","03-11","03-12","03-13","03-14","03-15"],
			  	series: [{
			  		name: "",
			  		data: [0,0,0,37,4,20,1]
			  	}]
			    };
			  this.drawCharts('charts', res);
			},
			drawCharts(id,data){
				const cWidth = uni.upx2px(650);
				const cHeight = uni.upx2px(500);
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
			        type: "line",
			        context: ctx,
			        width: cWidth,
			        height: cHeight,
			        categories: data.categories,
			        series: data.series,
			        animation: true,
			        timing: "easeOut",
			        duration: 1000,
			        rotate: false,
			        rotateLock: false,
			        background: "#FFFFFF",
			        color: ["#ec7136"],
			        padding: [15,0,0,0],
			        fontSize: 10,
			        fontColor: "#666666",
			        dataLabel: true,
			        dataPointShape: true,
			        dataPointShapeType: "hollow",
			        touchMoveLimit: 60,
			        enableScroll: false,
			        enableMarkLine: false,
			        legend: {
			          show: false,
			          position: "bottom",
			          float: "center",
			          padding: 5,
			          margin: 5,
			          backgroundColor: "rgba(0,0,0,0)",
			          borderColor: "rgba(0,0,0,0)",
			          borderWidth: 0,
			          fontSize: 10,
			          fontColor: "#666666",
			          lineHeight: 11,
			          hiddenColor: "#CECECE",
			          itemGap: 10
			        },
			        xAxis: {
			          disableGrid: true,
			          disabled: false,
			          axisLine: true,
			          axisLineColor: "#CCCCCC",
			          calibration: false,
			          fontColor: "#666666",
			          fontSize: 10,
			          lineHeight: 20,
			          marginTop: 0,
			          rotateLabel: false,
			          rotateAngle: 45,
			          itemCount: 5,
			          boundaryGap: "center",
			          splitNumber: 5,
			          gridColor: "#CCCCCC",
			          gridType: "solid",
			          dashLength: 4,
			          gridEval: 1,
			          scrollShow: false,
			          scrollAlign: "left",
			          scrollColor: "#A6A6A6",
			          scrollBackgroundColor: "#EFEBEF",
			          title: "",
			          titleFontSize: 10,
			          titleOffsetY: 0,
			          titleOffsetX: 0,
			          titleFontColor: "#666666",
			          formatter: ""
			        },
			        yAxis: {
			          gridType: "solid",
			          dashLength: 2,
			          disabled: false,
			          disableGrid: false,
			          splitNumber: 5,
			          gridColor: "#CCCCCC",
			          padding: 10,
			          showTitle: false,
			          data: []
			        },
			        extra: {
			          line: {
			            type: "curve",
			            width: 2,
			            activeType: "hollow",
			            linearType: "none",
			            onShadow: false,
			            animation: "vertical"
			          },
			        }
			    });
			}
		}
	}
</script>

<style lang="less">
	.headBar{
		background-color: white;
		padding: 20rpx 0 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
		width: 100%;
		box-shadow: 0 0 10rpx #e0e0e0;
		.tabBar{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 24rpx;
			.item{
				padding:10rpx 10rpx 12rpx;
				border-bottom: 4rpx solid transparent;
				color: #999999;
				&.cur{
					font-weight: 600;
					color: #e29751;
					border-bottom: 4rpx solid #e29751;
				}
			}
		}
	}
	.baseInfo{
		padding:20rpx 40rpx;
		background-color: white;
		.box1{
			position: relative;
			.no{
				font-size: 36rpx;
				margin:10rpx 0;
				font-weight: 600;
			}
			.online{
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #64be49;
				&::before{
					content: "";
					display: block;
					width: 10rpx;
					height: 10rpx;
					background-color: #64be49;
					box-shadow: 0 0 20rpx #64be49;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				&.off{
					color: #c0c0c0;
					&::before{
						background-color: #c0c0c0;
						box-shadow: 0 0 20rpx #c0c0c0;
					}
				}
			}
		}
		.box2{
			margin-top: 30rpx;
			&>view{
				height: 48rpx;
				line-height: 48rpx;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.key{
					color: #999999;
				}
			}
		}
		.box3{
			border-top:1rpx solid #f0f0f0;
			border-bottom:1rpx solid #f0f0f0;
			margin-top: 30rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			font-weight: 600;
			.line{
				width: 2rpx;
				height: 60rpx;
				background-color: #f0f0f0;
			}
			.key{
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
				display: block;
				margin-bottom: 16rpx;
			}
		}
	}
	.qrCode{
		.title{
			margin: 20rpx 0;
			font-weight: 600;
			color: #333333;
		}
		.img{
			width: 360rpx;
			height: 360rpx;
			margin: 0 auto;
			background-color: #f4f6f8;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 300rpx;
				height: 300rpx;
			}
		}
		.btn{
			margin-top: 40rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			font-weight: 600;
			border-top: 1rpx solid #e0e0e0;
		}
	}
	.deviceAssign{
		padding:20rpx 40rpx;
		background-color: white;
		.item{
			margin-bottom: 40rpx;
			height: 60rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 6rpx 10rpx #e0e0e0;
			border-radius: 10rpx;
			.unbind{
				color: #ec7136;
				font-size: 24rpx;
				// font-weight: 600;
				margin-left: 20rpx;
			}
		}
	}
	.portInfo{
		padding-bottom:40rpx;
		.title{
			color: #555;
			font-weight: 600;
			margin:20rpx 20rpx;
			.icon{
				color: #f4b349;
			}
		}
		.item{
			margin-top: 20rpx;
			padding:20rpx 40rpx;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			.head{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #71bc59;
				.index{
					display: block;
					width: 48rpx;
					height:48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 50%;
					border: 2rpx solid #71bc59;
					font-weight: 600;
					margin-right: 10rpx;
				}
				.orderno{
					margin-left: 20rpx;
					color: #999999;
				}
			}
			&.open{
				.head{
					color: #4882d3;
					.index{
						border: 2rpx solid #4882d3;
					}
				}
			}
			.state{
				width: 100%;
				background-color: #f1f1f1;
				color:#666666;
				margin-top: 10rpx;
				border-radius: 10rpx;
				padding: 6rpx 10rpx;
			}
		}
	}
	.modal{
		.head{
			margin: 40rpx 0 60rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
		.content{
			&>view{
				width: 40%;
				height: 80rpx;
				margin: 0 auto 48rpx;
				border:1rpx solid #e0e0e0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0 20rpx;
				font-size: 24rpx;
				input{
					width: 60%;
					height: 80rpx;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}
		.footer{
			display: flex;
			justify-content: center;
			align-items: center;
			&>view{
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				color: #eca768;
				border-top: 1rpx solid #e0e0e0;
			}
			.confirm{
				background:linear-gradient(90deg,#eca768,#e85b36);
				color: #ffffff;
			}
		}
	}
	.dataInfo{
		.box1,.box2{
			padding: 20rpx 40rpx;
			background-color: white;
			margin-top: 20rpx;
			border-top:1rpx solid #e0e0e0;
			border-bottom:1rpx solid #e0e0e0;
		}
		.box1{
			display: flex;
			justify-content: space-between;
			text-align: center;
			font-weight: 600;
			.key{
				font-size: 20rpx;
				color: #999999;
				font-weight: 400;
				margin-bottom: 16rpx;
			}
		}
		.box2{
			.tabBarBtn{
				margin-top: 10rpx;
				color: #999999;
				text{
					margin-right: 20rpx;
					padding: 6rpx 20rpx;
					font-size: 24rpx;
					border: 1rpx solid transparent;
					color: #999999;
					border-radius: 40rpx;
					&.cur{
						border: 1rpx solid #ec7136;
						color: #ec7136;
					}
				}
			}
			.charts{
				margin-top: 20rpx;
				width: 100%;
				height: 500rpx;
			}
		}
	}
	.button{
		width: 100%;
		background:linear-gradient(90deg,#f4b349,#ec7136);
		color: white;
		text-align: center;
		padding: 12rpx 20rpx;
		border-radius: 10rpx;
		&.disable{
			background: linear-gradient(90deg,#d0d0d0,#a0a0a0);
		}
	}
</style>
